<template>
    <div style="background-color: #ffffff;margin-top: -59px;">
        <div class="img-div">
            <div>
                <img src="../../assets/img/logo_purple.png" class="logo-img">
                <img src="../../assets/img/流程.png" class="process-img">
            </div>
        </div>
        <div style="width: 800px;margin: 0 auto">
            <div class="root-provider">
                <div style="border: 0px solid black; position: relative;
                    box-sizing: border-box; display: flex;
                    flex-direction: column; align-content: flex-start; flex-shrink: 0;">
                    <div style="width: 810px;">
                        <div class="header-wrapper ">
                            <h2 class="header-title">确认订单信息</h2>
                        </div>
                        <div class="item-headers-wrap">
                            <div class="item-headers-content item-headers-0">订单需求</div>
                            <div class="item-headers-content item-headers-1">需求详情</div>
                            <div class="item-headers-content item-headers-2">定金</div>
                            <div class="item-headers-content item-headers-3">尾款</div>
                        </div>
                    </div>
                    <div style="border: 0px solid black; position: relative; box-sizing: border-box;
                             display: flex; flex-direction: column; align-content: flex-start; flex-shrink: 0;">
                        <div class="order-orderInfo">
                            <span>需求用户:&nbsp;</span>
                            <a href="" target="_self">{{demands.username}}</a>
                        </div>
                        <div style="display: flex; flex-direction: column; justify-content: flex-start;
                            align-items: stretch; margin: 0px; padding: 0px; background-color: rgb(251, 252, 255);
                            border-bottom: 1px dotted rgb(221, 221, 221);">
                            <div style="padding: 0px;">
                                <div class="item-row">
                                    <div class="order-itemInfo">
                                        <div class="info-detail info-cell">
                                            <div class="info-cell info-msg">
                                                <a href="" target="_blank" class="info-title">
                                                    {{demands.demands}}
                                                </a>
                                            </div>
                                        </div>
                                        <div class="info-require info-cell">{{demands.requirements}}</div>
                                        <div class="info-price info-cell">{{deposit}}</div>
                                    </div>
                                    <div class="item-row__price">
                                        <div class="label item-row__price-item">
                                                        <span style="font-weight: bold;font-style: normal;text-decoration: none;
                                                            color: rgb(173,179,251); font-size: 14px; min-width: 100px;">
                                                        {{balancePayment}}
                                                        </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="display: flex; flex-direction: column;justify-content: flex-start;
                                     align-items: stretch; margin: 0px; padding: 0px; background-color: rgb(242, 247, 255);
                                     border-bottom: 1px dotted rgb(128, 178, 255);">
                            <div style="padding: 0px; border-top: 1px solid rgb(255, 255, 255);">
                                <div style="display: grid; grid-template-columns: 1fr 1fr; margin: 0px;">
                                    <div style="padding: 0px; border-right: 1px solid rgb(255, 255, 255); border-top: 1px solid rgb(255, 255, 255);">
                                        <div style="display: flex; flex-direction: column; justify-content: flex-start;
                                                        align-items: stretch; margin: -5px 0px; padding: 0px;">
                                            <div style="padding: 5px; border-top: 1px solid rgb(255, 255, 255);">
                                                <div class="textarea">
                                                    <label class="textarea__title">
                                                        <div>给需求用户留言：</div>
                                                    </label>
                                                    <div class="textarea__wrapper">

                                                        <el-input type="textarea" placeholder="请输入备注(选填)"
                                                                  v-model="receiveRemarks" maxlength="500"
                                                                  style="width: 500px"
                                                                  show-word-limit
                                                                  :autosize="{ minRows: 2}">
                                                        </el-input>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div style="padding: 0px; border-top: 1px solid rgb(173,179,251);">
                                <div style="display: flex; flex-direction: column; justify-content: flex-end;
                                                 align-items: flex-end; margin: 0px; padding: 10px 0px;">
                                    <div style="padding: 0px;">
                                        <div class="label">
                                            <span class="label__header"
                                                  style="font-weight: normal; font-style: normal;
                                                  text-decoration: none; font-size: 14px; min-width: 100px; margin-right: 10px;">
                                                总价
                                            </span>
                                            <span style="font-weight: bold; font-style: normal; text-decoration: none;
                                                                color: rgb(173,179,251); font-size: 14px; min-width: 100px;">
                                                ￥{{totalPrice}}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                        <div class="submitOrder-container">
                            <div class="wrapper">
                                <a class="go-back" target="_self" href="">
                                    <i class="el-icon-back"></i>返回需求
                                </a>
                                <el-button class="go-btn"
                                           style="background-color: rgb(173,179,251);"
                                @click="submitOrder">提交订单
                                </el-button>
                            </div>
                        </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script setup>
  import {selectDemandById} from "@/assets/api/demandsApi";
  import {addOrder} from "@/assets/api/ordersApi";
  import {useRoute, useRouter} from "vue-router";
  import {ElMessage} from "element-plus";
  import {onBeforeMount, ref} from "vue";

  const route = useRoute();
  const router = useRouter();
  const demands = ref({});
  const deposit = ref(localStorage.getItem('deposit'));
  const balancePayment = ref(localStorage.getItem('balancePayment'));
  const totalPrice = ref(parseInt(localStorage.getItem('deposit')) + parseInt(localStorage.getItem('balancePayment')));
  const receiveRemarks = ref('');

  const selectDemand = () => {
    let data = {};
    data.demandId = route.query.id;
    selectDemandById(data).then((res) => {
      demands.value = res.data;
    });
  };
  const submitOrder = () => {
    let data = {order: {}, orderItem: {}};
    data.order.demandId = demands.demandId.value;
    data.order.demandUsername = demands.username.value;
    data.order.receiveUsername = localStorage.getItem('username');
    data.order.deposit = deposit.value;
    data.order.balancePaymen = balancePayment.value;
    data.order.totalPrice = totalPrice.value;
    data.order.receiveRemarks = receiveRemarks.value;
    data.order.status = 0;
    data.orderItem = data.order;
    addOrder(data).then((res) => {
      if (res.code === 200) {
        ElMessage.success(res.message);
        router.push('/myOrders');
      } else {
        ElMessage.error(res.message);
      }

    })
  };

  onBeforeMount(() => {
    selectDemand();
  });

</script>

<style scoped>
    .img-div {
        width: 1200px;
        position: relative;
        display: flex;
        margin: 60px auto 0 auto;
    }

    .process-img {
        width: 55%;
        height: 80%;
        margin-top: 30px;
        margin-left: 150px;
    }

    .logo-img {
        float: left;
        z-index: 9;
        padding-top: 28px;
        width: 280px;
        height: 90px;
        line-height: 64px;
        position: relative;
    }

    .root-provider {
        min-height: 400px;
    }

    .header-wrapper {
        position: relative;
        margin-bottom: 15px;
    }

    .header-wrapper .header-title {
        line-height: 25px;
        color: #333;
        font-weight: 700;
        font-size: 14px;
    }
    .item-headers-wrap {
        margin-top: 15px;
        color: #6c6c6c;
    }
    .item-headers-0 {
        width: 200px;
        margin-left: 0;
    }
    .item-headers-content {
        display: inline-block;
        height: 24px;
        line-height: 24px;
        text-align: center;
        border-bottom: 3px solid #b2d1ff;
        font-size: 12px;
        margin-left: 1px;
        vertical-align: bottom;
    }
    .item-headers-1 {
        width: 250px;
    }
    .item-headers-2, .item-headers-3 {
        width: 173px;
    }
    .order-orderInfo {
        position: relative;
        padding-bottom: 5px;
        margin-top: 25px;
        border-bottom: 1px dotted #80b2ff;
        height: 27px;
    }
    .order-itemInfo {
        display: inline-block;
        vertical-align: top;
    }
    .order-itemInfo .info-detail {
        width: 245px;
        padding: 10px 0 10px 10px;
    }
    .order-itemInfo .info-cell {
        display: inline-block;
        box-sizing: content-box;
        margin-right: 1px;
    }
    .order-itemInfo .info-msg {
        padding-left: 10px;
        vertical-align: top;
    }
    .order-itemInfo .info-title {
        color: #3c3c3c;
        width: 180px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }
    .order-itemInfo .info-require {
        color: #3c3c3c;
        vertical-align: top;
        display: inline-block;
        width: 150px;
        text-align: center;
        padding: 10px 0;
    }
    .order-itemInfo .info-price {
        color: #3c3c3c;
        vertical-align: top;
        display: inline-block;
        width: 250px;
        text-align: center;
        padding: 10px 0;
    }
    .item-row .item-row__price {
        display: inline-block;
        width: 100px;
        text-align: center;
        padding-right: 5px;
    }
    .item-row .item-row__price-item {
        padding: 10px 0 5px;
    }
    .label {
        display: inline-block;
        padding: 5px;
    }
    .textarea {
        position: relative;
        padding: 10px;
    }
    .textarea .textarea__title {
        vertical-align: top;
        display: inline-block;
    }
    .textarea .textarea__wrapper {
        display: inline-block;
    }
    .label__header {
        display: inline-block;
        width: inherit;
        text-align: right;
        color: #adb3fb;
    }

    .submitOrder-container {
        text-align: right;
        margin-top: -1px;
    }

    .submitOrder-container .wrapper {
        display: inline-block;
        padding: 0 0 5px 5px;
    }

    .submitOrder-container .go-back {
        color: #adb3fb;
        text-decoration: none;
        margin-right: 50px;
        line-height: 34px;
    }

    a {
        text-decoration: none;
        cursor: pointer;
    }

    .submitOrder-container .go-btn {
        display: inline-block;
        width: 182px;
        height: 39px;
        position: relative;
        vertical-align: middle;
        cursor: pointer;
        text-align: center;
        font-size: 14px;
        font-weight: 700;
        color: #fff;
    }
</style>

